 <!doctype html>
 <html lang="zh-CN">
 <head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="css/common.css"/>
   <link rel="stylesheet" href="css/main.css"/>
     <link rel="stylesheet" href="css/jquery-ui-timepicker-addon.css"/>
     <link rel="stylesheet" href="css/jquery-ui.css"/>
     <link rel="stylesheet" href="css/bootstrap.css"/>
     <link href="css/city-picker.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="css/jquery-impromptu.min.css" type="text/css"/>
     <link rel="stylesheet" href="css/combo.select.css" type="text/css"/>
   <title>Document</title>
 </head>
 <body>
    <div id="dataLoad" style="display:none; position: fixed; width: 100%; top: 20%; z-index: 1001;">
        <table width=100% height=100% border=0 align=center valign=middle>
             <tr height=50%><td align=center>&nbsp;</td></tr>
             <tr><td align=center><img src="images/loading.gif"/></td></tr>
             <tr><td align=center>提交中，请稍后......</td></tr>
             <tr height=50%><td align=center>&nbsp;</td></tr>
            </table>
      </div>
  <div class="container">
    <div id="search_bar" class="mt10">
       <div class="box">
          <div class="box_border">
            <div class="box_top"><b class="pl15">同行人员</b></div>
            <div class="box_center pt10 pb10">
              <table class="form_table" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td>选择部门</td>
                  <td>
                    <span class="fl">
                      <div class="select_border">
                        <div class="select_containers ">
                        <select name="" class="select"  id="depart-select">

                        </select> 
                        </div>
                      </div>
                    </span>
                  </td>
                    <td>选择人员</td>
                    <td>
                    <span class="fl">
                      <div class="select_border">
                          <div class="select_containers ">
                              <select name="" class="select" id="user-select">
                              </select>
                          </div>
                      </div>
                    </span>
                    </td>
                    <td id="add_people_button"><a class="ext_btn" ><span class="add"></span>添加</a></td>
                </tr>
              </table>
            </div>
              <div id="table" class="mt10">
                  <div class="box span10 oh">
                      <table width="100%" border="0" cellpadding="0" cellspacing="0" class="list_table" id="people_table">
                          <tr>
                              <th style="width: 10%" class="td_center">#</th>
                              <th style="width: 10%" class="td_center">序号</th>
                              <th style="width: 35%" class="td_center">人员姓名</th>
                              <th style="width: 35%" class="td_center">人员部门</th>
                              <th style="width: 10%" class="td_center">操作</th>
                          </tr>
                      </table>
                  </div>
              </div>

          </div>
        </div>
    </div>
     <div id="forms" class="mt10">
        <div class="box">
          <div class="box_border">
            <div class="box_top"><b class="pl15">出差申请信息</b></div>
            <div class="box_center">
               <table class="form_table pt15 pb15" width="100%" border="0" cellpadding="0" cellspacing="0">
                 <tr>
                  <td class="td_right">出差申请类型：</td>
                  <td class="">
                      <div class="select_border">
                          <div class="select_containers" >
                              <select name="" class="select" width="200px" id="business_type">
                              </select>
                          </div>
                      </div>
                      <span class="pl10" style="display:none" id="case_wrap">大案要案号/名：
                         <div class="select_border">
                             <div class="select_containers ">
                                 <select name="" class="select" id="case_info">

                                 </select>
                             </div>
                         </div>
                     </span>
                  </td>

                </tr>
                <tr >
                  <td class="td_right">出差省/市/区：</td>
                  <td>
                      <div id="distpicker" >
                          <div class="form-group" style="width:500px; float: left">
                              <div style="position: relative;">
                                  <input id="city-picker3" class="form-control" readonly type="text" value="四川省/宜宾市/翠屏区" data-toggle="city-picker">
                              </div>
                          </div>
                          <div class="form-group" style="margin-left: 50px">
                              <button class="btn btn-warning" id="reset" type="button">重置</button>
                              <button class="btn btn-danger" id="destroy" type="button">确定</button>
                          </div>
                      </div>
                    </td>
                  </tr>
                   <tr>
                       <td class="td_right">具体县/乡：</td>
                       <td class="">
                           <input type="text" placeholder="请输入具体县/乡" name="name" class="input-text lh25" size="20" id="county">
                       </td>
                   </tr>
                   <tr>
                       <td class="td_right">出差时间：</td>
                       <td class="">
                           <input type="text" placeholder="点击选择开始时间" name="business_start_time" class="input-text lh25" id="business_start_time" size="20">至
                           <input type="text" placeholder="点击选择结束时间" name="business_end_time" class="input-text lh25" id="business_end_time" size="20">天数
                           <input type="text" class="input-text lh25" name="days" id="days" disabled size="5">
                       </td>
                   </tr>
                 <tr>
                  <td class="td_right">出差原因：</td>
                  <td class="">
                    <textarea name="" id="business_reason" cols="30" rows="10" class="textarea"></textarea>
                  </td>
                 </tr>
                 <tr>
                  <td class="td_right">自驾车：</td>
                  <td class="">
                    <input type="radio" name="driveSelf" value="1"> 是
                    <input type="radio" name="driveSelf" value="0" checked> 否
                  </td>

                 </tr>
                   <tr>
                  <td class="td_right">相关附件：</td>
                  <td class="" id="upload_area">
                      <form id="upload_file_area" action="Upload" method="post" enctype="multipart/form-data">
                          <input id="upload" type="file" style="display: none" multiple name="files[]" class="input-text lh30" size="10">
                     <!--     <input id="upload2" type="file" style="display: none" name="file" class="input-text lh30" size="10">
                          <input id="upload3" type="file" style="display: none" name="file" class="input-text lh30" size="10">-->
                      </form>
                      <a class="ext_btn" id="uploadButton"><span class="upload"></span>上传</a>
                      <input id="filearea" type="text" class="input-text lh25" disabled size="50" placeholder="未上传任何附件，请上传不多于3个附件">
                      <a class="ext_btn" id="clearFile" style="display: none;"><span class="del"></span>清空</a>
                    </td>
                 </tr>
                   <tr>
                       <td class="td_right">是否借车：</td>
                       <td class="">
                           <input type="radio" name="isLoanCar" value="1"> 是
                           <input type="radio" name="isLoanCar" value="0" checked> 否
                           <a class="ext_btn" id="loanCar" style="display:none"><span class="loanCar"></span>借车申请</a>
                       </td>
                   </tr>
                   <tr>
                       <td class="td_right">是否借款：</td>
                       <td class="">
                           <input type="radio" name="isLoanMoney" value="1"> 是
                           <input type="radio" name="isLoanMoney" value="0" checked> 否
                           <a class="ext_btn" id="loanMoney" style="display:none"><span class="loanMoney"></span>借款申请</a>
                       </td>
                   </tr>
               </table>
            </div>
          </div>
        </div>
         <div class="box_bottom pb5 pt5 pr10 modify_area" style="border:1px solid #dadada;">
             <div class="search_bar_btn" style="text-align:right;">
                 <input type="button" id="confirm_btn" name="button" class="btn1 btn82 btn_save2" value="确定" >
                 <input type="button" id="reset_btn" name="button" class="btn1 btn82 btn_res" value="重置" >
             </div>
         </div>
     </div>
   </div>
   <div id="loanCar_dialog" class="mt10" style="display:none" title="借车申请">
        <div class="box">
            <div class="box_center">
                <table class="form_table pb15" width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="td_left">所属部门：</td>
                        <td class="">
                            <input type="text" placeholder="请输入所属部门" class="input-text lh25" size="20" id="loanCar_depart" disabled>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">借车人员：</td>
                        <td class="">
                            <input type="text" placeholder="请输入人员姓名" class="input-text lh25" size="20" id="loanCar_user" disabled>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">借车事由：</td>
                        <td class="">
                            <textarea name="" id="loanCar_reason" cols="30" rows="10" class="textarea"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">车牌号：</td>
                        <td class="" id="car_area">
                            <input type="text" placeholder="请输入车牌号，多个车牌用逗号连接" class="input-text lh25" size="55" id="loanCar_num"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">专职驾驶员：</td>
                        <td class="">
                            <input type="radio" name="proDriver" value="0" checked> 否
                            <input type="radio" name="proDriver" value="1"> 是
                            <span class="pl10 driver_wrap" style="display:none" >驾驶员信息：
                                <div class="select_border">
                                    <div class="select_containers" >
                                        <select name="" class="select" width="200px" id="loanCar_driver">
                                        </select>
                                    </div>
                                </div>
                                <a class="ext_btn" id="add_driver_btn"><span class="add"></span>添加</a>
                                <a class="ext_btn" id="clear_driver_btn"><span class="del"></span>清空</a>
                            </span>
                        </td>
                    </tr>
                    <tr class="driver_wrap" style="display:none">
                       <td></td>
                       <td>
                           <textarea placeholder="驾驶员信息" name="" id="loanCar_driver_info" cols="30" rows="10" class="textarea" disabled></textarea>
                       </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div id="loanMoney_dialog" class="mt10" style="display:none" title="借款申请">
        <div class="box">
            <div class="box_center">
                <table class="form_table pb15" width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="td_left">所属部门：</td>
                        <td class="">
                            <input type="text" placeholder="请输入所属部门" class="input-text lh25" size="20" id="loanMoney_depart" disabled>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">借款人：</td>
                        <td class="">
                            <input type="text" placeholder="请输入人员姓名" class="input-text lh25" size="20" id="loanMoney_user" disabled>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">借款事由：</td>
                        <td class="">
                            <textarea name="" id="loanMoney_reason" cols="30" rows="10" class="textarea"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">借款金额：</td>
                        <td class="">
                            <input type="number" placeholder="请输入借款金额" class="input-text lh25" size="20" id="loanMoney_amount">
                            <span></span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
 </body>
 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 <script type="text/javascript" src="js/colResizable-1.6.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui.js"></script>
 <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
 <script type="text/javascript" src="js/datapicker_cn.js"></script>
 <script type="text/javascript" src="js/common.js"></script>
 <script src="js/city-picker.data.js"></script>
 <script src="js/city-picker.js"></script>
 <script src="js/main.js"></script>
 <script src="js/config.js" type="text/javascript"></script>
 <script src="js/jquery-impromptu.min.js" type="text/javascript"></script>
 <script src="js/business_approve.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.combo.select.js" type="text/javascript"></script>
 <script type="text/javascript">
     var loanCarData = {'driverID':''};
     var loanMoneyData = {};
     var isSetCarData = false;
     var isSetMoneyData = false;

     var isModifyMode = false;

     //辅助函数，处理借款审批的基本信息显示或修改
     function initLoanMoneyBasicInfo(){
         var curUser = JSON.parse(window.localStorage.getItem('user_info'));
         var curDepart = window.localStorage.getItem('cur_department');
         $('#loanMoney_depart').val(curUser.department_info[curDepart].department_name);
         $('#loanMoney_user').val(curUser.user_name);
         if(isSetMoneyData){
             $('#loanMoney_reason').val(loanMoneyData.reason);
             $('#loanMoney_amount').val(loanMoneyData.money);
         }else{
             loanMoneyData.user_id = curUser.user_id;
             loanMoneyData.depart_id = curUser.department_info[curDepart].department_id;
             $('#loanMoney_reason').val('');
             $('#loanMoney_amount').val('');
         }
     }




    //辅助函数，处理借车审批的基本信息显示,或修改
    function initLoanCarBasicInfo(){
        var curUser = JSON.parse(window.localStorage.getItem('user_info'));
        var curDepart = window.localStorage.getItem('cur_department');
        $('#loanCar_depart').val(curUser.department_info[curDepart].department_name);
        $('#loanCar_user').val(curUser.user_name);
        getDriver();
        if(isSetCarData){
            $('#loanCar_reason').val(loanCarData.reason);
            $('#loanCar_num').val(loanCarData.carNum);
            $('#loanCar_driver_info').val(loanCarData.driverName);
        }else{
            loanCarData.user_id = curUser.user_id;
            loanCarData.depart_id = curUser.department_info[curDepart].department_id;
            $('#loanCar_num').val('');
            $('#loanCar_reason').val('');
            $('#loanCar_driver_info').val('');
            $(":radio[name='proDriver'][value='0']").prop('checked', "checked");
            $('.driver_wrap').hide();
        }

        $("input[name='proDriver']").click(function(){
            if($(this).val() == 1){
                $('.driver_wrap').show();
            }
            else{
                $('.driver_wrap').hide();
            }
        })
    }




     $(function(){
         $("#people_table").colResizable({
             liveDrag:true,
             gripInnerHtml:"<div class='grip'></div>",
             draggingClass:"dragging",
             resizeMode:'flex'
         });


         //设置时间选择器
         setDataPicker();
         //设置部门
         getSection();
        //设置部门成员
         getSectionMember();
         //设置出差类别
         getBusinessType();
         //处理时间
         processTime();
         //处理出差类别选择和大案要案获取
         processBusinessTypeChange();
         //处理上传文件的操作
         processUploadFile();
         //设置默认用户
         setDefaultUser();
         //处理添加同行用户
         AddUser();
         //处理计算天数
         calcDays();
         //处理借款和借车按钮
         processLoanCarBtn();
         processLoanMoneyBtn();
         //借车审批中的司机功能添加
         addDriver();
         //借车审批中的清除司机
         clearDriver();


         //处理确定按钮
         $('#confirm_btn').click(function(){
            var postData = createPostData();

            postData.isLoanMoney = isSetMoneyData;
            postData.loanMoneyData = loanMoneyData;
            postData.isLoanCar = isSetCarData;
            postData.loanCarData = loanCarData;
            if(!postData)
                return;

            var r = uploadData(postData);
            if(r){
                $.prompt( "<h5>提交成功</h5>",{
                    title: '消息提醒',
                    buttons: {'确定': true}
                });
            }
         });

         //处理重置按钮
         $('#reset_btn').click(function(){
             clearData();
             loanCarData = {};
             loanMoneyData = {};
             isSetCarData = false;
             isSetMoneyData = false;
             $(":radio[name='driveSelf'][value='0']").prop('checked', 'checked');
             $(":radio[name='isLoanCar'][value='0']").prop('checked', 'checked').click();
             $(":radio[name='isLoanMoney'][value='0']").prop('checked', 'checked').click();

             initLoanCarBasicInfo();
             initLoanMoneyBasicInfo();
         });

         $('#loanCar').click(function(){
             initLoanCarBasicInfo();
             $('#loanCar_dialog').dialog({
                 resizable: false,
                 height: "auto",
                 width: 600,
                 modal: true,
                 buttons: {
                     '确定' :function(){
                         var driverData = processLoanCarData();
                         if(!driverData){
                             $.prompt("<h3>未填写借车理由，请补完</h3>", {
                                 title: '错误提醒',
                                 buttons: {'确定': true}
                             })
                         }
                         else{
                             isSetCarData = true;
                             $(this).dialog("close");
                         }
                     },
                     '取消': function(){
                         $(this).dialog("close");
                     }
                 }
             });
         });

         $('#loanMoney').click(function(){
             initLoanMoneyBasicInfo();
             $('#loanMoney_amount').bind('input propertychange',function(){
                 processFeeInput(this);
             });
             $('#loanMoney_dialog').dialog({
                 resizable: false,
                 height: "auto",
                 width: 600,
                 modal: true,
                 buttons: {
                     '确定' :function(){
                         var t = processFeeInput($('#loanMoney_amount'));
                         var r = $('#loanMoney_reason').val();
                         if(!t || r == ''){
                             $.prompt("<h3>金额输入错误或未填写借款原因，请改正</h3>", {
                                 title: '错误提醒',
                                 buttons: {'确定': true}
                             })
                         }else{
                             processLoanMoneyData();
                             isSetMoneyData = true;
                             $(this).dialog("close");
                         }
                     },
                     '取消': function(){
                         $(this).dialog("close");
                     }
                 }
             });
         })
     });




 </script>
 </html>
  